<template>
  <!-- 头部区域 -->
	<view class="my-box">
    <view class="title-item">
      <view class="title-left">
        <view class="title-text">最近播放</view>
        <!-- <view class="title-mid"> -->
          <uni-icons type="info" class="title-icon" size="25" color="#a7a9b7"></uni-icons>
          <view class="title-num">(4首)</view>
        <!-- </view> -->
      </view>
      
      <my-radio></my-radio>
    </view>
    
    <view class="list-box">
      <view class="list-left">
        <view class="list-num">1</view>
        <view class="list-user">
          <view class="list-usershow">in the end</view>
          <view class="list-username">林肯公园</view>
        </view>
      </view>
      <view class="list-right">
        <view class="iconfont icon-24gf-playCircle"></view>
        <view class="iconfont icon-24gf-pauseCircle"></view>
      </view>
    </view>
    
    
		<view class="text-item">
		  <view class="text-top">啊哦，最近没有听歌哦</view>
      <view class="text-bottom">仅显示小程序操作记录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
  .my-box{
    padding: 0 20px;
  }
  
.text-item{
  // text-align: center;
  margin-top: 30%;
  // height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .text-top{}
  .text-bottom{
    font-size: 12px;
    color: #acb5c5;
    margin-top: 10px;
  }
}

.title-item{
  display: flex;
  justify-content: space-between;
  .title-left{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-text{
      font-weight: bold;
      font-size: 20px;
    }
    .title-icon{
      margin: 0 5px;
    }
    .title-num{
      color: #a7a9b7;
      font-size: 12px;
    }
  }
  
}

.list-box{
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .list-left{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .list-num{
      color: #a1a4b3;
      font-weight: bold;
      font-size: 20px;
    }
    .list-user{
      margin-left: 20px;
      display: flex;
      // justify-content: start;
      // align-items: center;
      flex-direction: column;
      .list-usershow{}
      .list-username{
        margin-top: 3px;
        font-size: 12px;
        color: #a1a4b3;
      }
    }
  }
  .list-right{
    display: flex;
    justify-content: center;
    align-items: center;
    
    .icon-24gf-playCircle, .icon-24gf-pauseCircle{
      font-size: 30px;
      color: #c3cade;
    }
  }
}
</style>
